﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>taskAddCategory</title>
            <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
        <script src="/Scripts/jquery-2.0.3.min.js"></script>
        <script src="/Scripts/json2.min.js"></script>

        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/administrative/taskAddCategory.css" rel="stylesheet" />
        <script src="/pages/administrative/taskAddCategory.js"></script>

    </head>
    <body>
		<div id="PropertyTemplate" data-win-control="WinJS.Binding.Template">
						<div class="PropertyItem" style="width: 100%;height:100%;">
							<p data-win-bind="innerText: Name" style="padding-left:7px;"></p>
						</div>
					</div>
        <div id="generatedPropertyTempate" data-win-control="WinJS.Binding.Template">
						<div class="PropertyItem" style="width: 100%;height:100%;">
							<p data-win-bind="innerText: Name" ></p>
						</div>
					</div>
            <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage" style="background-color: #EFEFEF;">
            <header class="TopArea" aria-label="Header content" role="banner">
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to Group3.MediaTool.App!</span>
                </h1>
            </header>
            <section id="mainsection" aria-label="Main content" role="main">
        	    <hgroup>
                   <div style="float:left;padding-right:7px; padding-top:3px;"><button id="backButton" class="win-backbutton" aria-label="Back" type="button"></button></div>
					<div style="padding-top:7px;"><h2 >Administrative Tasks</h2></div>
			    </hgroup>
				<!--Vorlage für neues Element (erster Wurf statische größe-->
				<div id="NewCatagoryTemplate" class="TaskAddCategoryFlexChild" data-win-control="WinJS.Binding.Template">
        			<div class="TaskAddCategoryFlexChildItem">
					<div class="TaskAddCategoryFlexChildHeaderArea">
						<span data-win-bind="textContent: categoryName"></span>
					</div>
					<div class="TaskAddCategoryFlexChildPropertyArea">
						<p>Properties</p>
						<div style="height:217px;">
						<div id="GeneratedPropertyList" 
						class="win-selectionstylefilled"
						data-win-control="WinJS.UI.ListView"
						data-win-options="{ 
                            itemTemplate: generatedPropertyTempate, 
							selectionMode: 'none',
							layout: { type: WinJS.UI.ListLayout } 
						}"
						 style="position: relative; height:100%;padding-top:3px; margin-left:7px;margin-right:7px; margin-bottom:17px; background-color:white;">
						</div>
						</div>
					</div>
					</div>
				</div>
				<div id="renderNewCategoryArea" class="ms-flexbox">
					
				</div>
            </section>
        	<div id="CategoryAppBar" data-win-control="WinJS.UI.AppBar" style="-ms-grid-row: 2;">
		        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit', type:'flyout',flyout:select('#editFlyout'),label:'Edit',icon:'edit',section:'global',extraClass:'categoryBar',tooltip:'Edit item'}">
				</button>
				<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',extraClass:'categoryBar',tooltip:'Add item'}"></button>
				<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'selection',extraClass:'categoryBar',tooltip:'Delete item'}"></button>
        	</div>
        </div>
		
    	<div id="CategoryPanel">
			<h3 style="padding: 37px 3px 7px 20px">Category-Definition</h3>
			<div style="padding:17px 3px 7px 20px">
				<div style="float:left; padding-top:7px;">Name:</div>
				<div style="width:75%; float:left;padding-left:7px; text-align:right;">
					<input id="tbCategoryName" style="width: 100%;height: 28px;" type="text">
				</div>
			</div>
			<div style="padding:17px 3px 7px 20px">
				<div style="padding-top:33px; padding-bottom:7px;">Properties:</div>
				<div>
					
					
					<div id="AddProperty"></div> 
					<div style="padding-top:5px;">New Property</div>
					<div id="PropertyList" 
						class="win-selectionstylefilled"
						data-win-control="WinJS.UI.ListView" 
						data-win-options="{ 
                            itemTemplate: PropertyTemplate, 
							selectionMode: 'single', 
							tapBehavior: 'invoke', 
                            swipeBehavior: 'select', 
							layout: { type: WinJS.UI.ListLayout } 
						}"
						style="padding-top:5px; width: 299px; left: 19.5px; overflow:auto;">
						
					</div>

				</div>
				<div style="text-align:right;">
					<button id="AddCategoryButton" style="margin-right:17px;width:66%;">Generate Category</button>
				</div>
				<div style="text-align:right;margin-top:7px;">
					<button id="SubmitCategoryButton" style="margin-right:17px;width:66%;">Submit</button>
				</div>
			</div>
		</div>
        <!--Flyout for PropertyEdit-->
    	<div id="editFlyout" data-win-control="WinJS.UI.Flyout">
						Property Name:
    		<br>
    		<input id="inputName" data-win-bind="innerText:Name" style="width: 260.64px; height: 25.73px;" />
    		<br>
						Type:
    		<br>
    		<select id="selectType" style="width: 267.29px; height: 32px;">
    			<option selected>
					String
    			</option>
    			<option>
					Number
    			</option>
                <option>
                    Boolean
                </option>
                <option>
                    Data
                </option>
                <option>
                    Relation
                </option>
    		</select>
    		<br>
			<button id="SavePropertySettings" style="padding-top:7px;">Save Property</button>		
    	</div>
    </body>
</html>